<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" media="screen" href="../static/jqgrid/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/jqgrid/css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/bootstrap-4.1.1/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/css/font-awesome.min.css" />

<style>
html, body {
   margin: 0;
   padding: 0;
   font-size: 75%;
   height:100%;
}

</style>
</head>
<body>
<div class="container-fluid px-2" id="dateSourse">

	<nav>
  		<ol class="breadcrumb mb-2">
    		<li class="breadcrumb-item">计划管理</li>
    		
    		<li class="breadcrumb-item active">计划维护</li>
  		</ol>
	</nav>
	
	<form id="form-plan-query" class="form-inline mb-2">
	
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<label class="input-group-text">状态</label>
  			</div>
  			<select id="select-plan-status" class="plan-select" name="plan_status">
    			<option value=''>全部</option>
    			<option value="0">未下达</option>
    			<option value="1">下达</option>
  			</select>
		</div>

		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">计划编号</span>
  			</div>
  			
  			<select id="plan_id" name="plan_id" class="plan-select">
  				<option value="">请选择</option>	
  				<option :value="plan.plan_id"  v-for="plan in newDate.plan">{{plan.plan_id}}</option>
  			</select>
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">规格</span>
  			</div>
  			
  			<select id="standard_id" name="standard_id" class="plan-select">
  				<option value="">请选择</option>	
  				<option :value="standard.standard_id"  v-for="standard in newDate.standard">{{standard.standard_name}}</option>
  			</select>
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">客户</span>
  			</div>
  			
  			<select id="cus_id" name="cus_id" class="plan-select">
  				<option value="">请选择</option>	
  				<option :value="customer.cus_id"  v-for="customer in newDate.customer">{{customer.cus_name}}</option>
  			</select>
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">花色号</span>
  			</div>
  			<select id="co_id" name="co_id" class="plan-select">
  				<option value="">请选择</option>
  				<option :value="color.co_id"  v-for="color in newDate.color">{{color.co_name}}</option>
  			</select>
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">生产顺序号</span>
  			</div>
  			<input type="text" class="form-control" name="plan_xh1" style="width:100px;">
  			<span class="input-group-text">-</span>
  			<input type="text" class="form-control" name="plan_xh2" style="width:100px;">
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text mt-1" style="height:30px;">计划月份</span>
    			<input type="text" name="plan_month1" class="layui-input mt-1" style="height:30px;width:100px;" id="test1">
    			<span class="input-group-text mt-1" style="height:30px;">-</span>
    			<input type="text" name="plan_month2" class="layui-input mt-1" style="height:30px;width:100px;" id="test2">
    			</div>	
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">计划产量</span>
  			</div>
  			<input type="text" class="form-control" name="plan_num1" style="width:100px;">
  			<span class="input-group-text">-</span>
  			<input type="text" class="form-control" name="plan_num2" style="width:100px;">
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">产品类型</span>
  			</div>
  			
  			<select id="select-plan_type" class="plan-select" name="plan_type">
    			<option value=''>请选择产品类型</option>
    			<option value='1'>白布产品</option>
    			<option value="2">染色产品</option>
    			<option value="3">无底色印花产品</option>
    			<option value="4">有底色印花产品</option>
  			</select>
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text mt-1" style="height:30px;">计划下达日期</span>
    			<input type="text" name="plan_date1" class="layui-input mt-1" style="height:30px;width:100px;" id="test3">
    			<span class="input-group-text mt-1" style="height:30px;">-</span>
    			<input type="text" name="plan_date2" class="layui-input mt-1" style="height:30px;width:100px;" id="test4">
  			</div>
  
		</div>
		
		<div class="input-group mr-2">
  			<div class="input-group-prepend">
    			<span class="input-group-text">计划下达人</span>
    			
  			</div>
  			<input type="text" class="form-control" name="plan_person">
  			
		</div>
		
		<button id="bn-plan-query" type="button" class="btn btn-primary">查询</button>
		
	</form>
	
	<!-- 操作按钮 -->
	<div class="btn-group mb-2 mt-2">
	  <button type="button" id="addPlan" class="btn btn-primary">添加</button>
	  <button type="button" id="okPlan" class="btn btn-primary">下达</button>
	  <button type="button" id="removeOkPlan"class="btn btn-primary">取消下达</button>
	  <button type="button" id="deletePlan" class="btn btn-danger">删除</button>	    
	</div>

	<table id="grid"></table> 
	<div id="pager"></div>

</div>

<script type="text/javascript" src="../static/js/vue-2.5.16.min.js" ></script>
<script type="text/javascript" src="../static/js/axios.min.js" ></script>
<script src="../static/jqgrid/js/jquery.min.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../static/js/popper-1.14.3.min.js" type="text/javascript"></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js" type="text/javascript"></script>
<script src="../static/layer/layer.js" type="text/javascript"></script>
<script src="../static/laydate/laydate.js" type="text/javascript"></script>
<script type="text/javascript">

	//利用vue来获取下拉框中的数据
	new Vue({
		el:'#dateSourse',
		data:{
			newDate:{
				
			},
		},
		mounted(){
			let ads=this;
			axios.get('manager/date')
			.then(function(response){
				
				ads.newDate=response.data;
			})
			.catch(function(error){
				console.log(error);
			})
		},
	});
	
	//日期框
	
		//年月选择器
		laydate.render({
  				elem: '#test1'
  				,type: 'month'
			});
	
		laydate.render({
				elem: '#test2'
				,type: 'month'
		});
		
		//年月日
		 laydate.render({
  				elem: '#test3'
			});
		
		 laydate.render({
				elem: '#test4'
			});
	
	let layerIdx;
  $("#grid").jqGrid({
    datatype: 'json',
    url: 'manager',
    mtype:'GET',
    colModel: [
       {name: 'plan_id', label : '计划编号',key:true},
       {name: 'standard_name', label : '产品规格'},
       {name: 'cus_name', label : '客户'},
       {name: 'co_name', label : '花色号'},
       {name: 'plan_xh', label : '生产顺序号'},
       {name: 'plan_month', label : '计划月份'},
       {name: 'plan_num', label : '计划产量'},
       {name: 'planTypeName', label : '产品类型'},
       {name: 'plan_date', label : '计划下达时间'},
       {name: 'plan_person', label : '计划下达人'},
       {name: 'statusName', label : '计划状态'},
       {name: 'plan_id', label : '操作',width:'300px',formatter:function(value,options,row){
    	   if(row.plan_status=='0'){
    		   return `<button data-id="\${value}" type="button" class="btn btn-primary mb-2 mr-2 changePlan">修改</button> `+
        	   `<button data-id="\${value}" type="button" class="btn btn-primary mb-2 mr-2 delPlan">删除</button> `+
        	   `<button data-id="\${value}" type="button" class="btn btn-primary mb-2 mr-2 OkPlanOne">下达</button> `;
    	   }else{
    		   return `<button data-id="\${value}" type="button" class="btn btn-primary mb-2 mr-2 RemoveOkPlanOne">取消下达</button> `;
    	   }
       }}
     ],                                      
     
     pager:'#pager',
     rowNum:3,
     rowList:[2,3,5,10,15],
     multiselect:true,
     autowidth:true,
     height:'100%',
     responsive:true
     
 });
  //设置宽度自适应
   $(function(){
      $(window).resize(function(){
         $("#list2").setGridWidth($(window).width());
      });
   });
//设置表格高度适应窗口
	$("#grid").setGridHeight($(window).height()-185); 
	$(window).resize(()=>{
    $("#grid").setGridHeight($(window).height()-185);     
	});
	
   $("#grid").on("jqGridGridComplete", function(event) {
	
	  //修改操作
	  $('.changePlan').click(function(){
		  
   		  let plan_id = $(this).attr('data-id');
   		  
   		  $.get('changePlan_to',`plan_id=\${plan_id}`,function(html){
   			  
   			  layerIdx = layer.open({
   			      type: 1,
   			      area: ['700px', '540px'],		
   			      skin:'layui-layer-lan',
   			      anim: 1,
   			      content: html
   			  });	  
   			  
   		  },'html');
   		  
   		  return false;
   		  
   	  });
	  
	  //单删除操作
	  $('.delPlan').click(function(){
		  
		  let plan_id = $(this).attr('data-id');
		  layer.confirm('你确实要删除产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
			  let loadLayerIdx = layer.load();
			  $.ajax({
				  url:`manager/\${plan_id}`,
				  method:'delete',
				  dataType:'json'
			  }).done(function(result){
				  layer.close(loadLayerIdx);
				  if(result.success){
	  					reloadData();
	  					layer.msg(result.message, {
	  							  icon: 1,
	  							  time: 1000
	  							}); 
	  					layer.close(layerIdx);
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
			  }).fail(function(xhr){
				  layer.close(loadLayerIdx);
	  			  layer.msg('服务器错误！', {icon: 6});
			  });
			  layer.close(index);
		  })
		  return false;
	  });
	  
	//OkPlanOne 单下达   RemoveOkPlanOne  单取消下达
	  //单下达操作
	  $(".OkPlanOne").click(function(){
		  
		  let plan_id = $(this).attr('data-id');
		  layer.confirm('你确实要下达该产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
			  let loadLayerIdx = layer.load();
			  $.ajax({
				  url:`upd-plan/\${plan_id}`,
				  method:'put',
				  dataType:'json'
			  }).done(function(result){
				  layer.close(loadLayerIdx);
				  if(result.success){
	  					reloadData();
	  					layer.msg(result.message, {
	  							  icon: 1,
	  							  time: 1000
	  							}); 
	  					layer.close(layerIdx);
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
			  }).fail(function(xhr){
				  layer.close(loadLayerIdx);
	  			  layer.msg('服务器错误！', {icon: 6});
			  });
			  layer.close(index);
		  })
		  return false;
	  });
	
	//OkPlanOne 单下达   RemoveOkPlanOne  单取消下达
	  //单取消下达操作
	  $(".RemoveOkPlanOne").click(function(){
		  let plan_id = $(this).attr('data-id');
		  layer.confirm('你确实要取消下达该产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
			  let loadLayerIdx = layer.load();
			  $.ajax({
				  url:`upd-plan-r/\${plan_id}`,
				  method:'put',
				  dataType:'json'
			  }).done(function(result){
				  layer.close(loadLayerIdx);
				  if(result.success){
	  					reloadData();
	  					layer.msg(result.message, {
	  							  icon: 1,
	  							  time: 1000
	  							}); 
	  					layer.close(layerIdx);
	  				}else{
	  					layer.msg(result.message, {icon: 6}); 
	  				}
			  }).fail(function(xhr){
				  layer.close(loadLayerIdx);
	  			  layer.msg('服务器错误！', {icon: 6});
			  });
			  layer.close(index);
		  })
		  return false;
	  });
  
  });

//重载数据
const reloadData=function(){
	let arr=$('#form-plan-query').serializeArray();
	  
	  let params={};
	  
	  for(let i=0;i<arr.length;i++){
		  params[arr[i].name]=arr[i].value;
	  }
	  
	  $("#grid").jqGrid('setGridParam',{ 
        url:"manager", 
        postData:params, //发送数据 
        page:1 
    }).trigger("reloadGrid");
}
//设置按钮状态
//addPlan添加     deletePlan删除     okPlan下达   
const setBnStatus=function(){
	let curr=$('#select-plan-status').val();
	switch(curr){
	case '':
		$('#deletePlan,#okPlan').prop('disabled',true);
		$('#addPlan').prop('disabled',false);
		break;
	case '0':
		$('#addPlan,#deletePlan,#okPlan').prop('disabled',false);
		break;
	case '1':
		$('#deletePlan,#okPlan').prop('disabled',true);
		$('#addPlan').prop('disabled',false);
		break;
	
	}
}
//进行状态的查询的改变事件//状态，产品类型，计划编号，规格，客户，花色号
$('.plan-select').change(function(){
	reloadData();
	setBnStatus();
});
  //进行各种条件的查询工作
$('#bn-plan-query').click(function(){
	  /* var plan_date1=document.getElementById("test3").value;
	  var plan_date2=document.getElementById("test4").value;
	  //alert(plan_date1);
	  var date1=new Date(plan_date1);
	  alert(date1);
	  date1.setDate(date1.getDate());
	  //alert(date1);
	  var date2=new Date(plan_date2);
	  date2.setDate(date2.getDate());
	  //alert(date2);
	  document.getElementById("test3").value=date1;
	  document.getElementById("test4").value=date2; */
	  
	   reloadData();
	  
  });
  
  //添加事件

  $('#addPlan').click(function(){
	  
	  $.ajax({
		  url:'addPlanOne',
		  dataType:'html'
	  }).done(function(html){
		  layerIdx=layer.open({
				type:1,
				skin:'layui-layer-lan',
				anim:1,
				area:['700px','460px'],
				content:html
		  })
	  }).fail(function(xhr){
		  
	  });
	  
  
	});
  
  //多删除操作
  $('#deletePlan').click(function(){
	  //$("#grid").jqGrid('getGridParam','selarrrow')
	  //此方式可以是表格的复选框生成id的数组
	  var Ids = $("#grid").jqGrid('getGridParam','selarrrow');
	  if(!Ids || Ids.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	  layer.confirm('你确实要删除这些产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
		  let loadLayerIdx = layer.load();
		  $.ajax({
			  url:'manager',
			  method:'delete',
			  contentType:'application/json',
			  data:JSON.stringify(Ids),
			  dataType:'json'
		  }).done(function(result){
			  layer.close(loadLayerIdx);
			  if(result.success){
					reloadData();
					layer.msg(result.message,{
							  icon: 1,
							  time: 1000
							}); 
					layer.close(layerIdx);
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
		  }).fail(function(xhr){
			  layer.close(loadLayerIdx);
			  layer.msg('服务器错误！', {icon: 6});
		  });
		  layer.close(index);
	  });
	 
  });
  
  //执行下达操作
  $('#okPlan').click(function(){
	  var Ids = $("#grid").jqGrid('getGridParam','selarrrow');
	  if(!Ids || Ids.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	  layer.confirm('你确实要下达这些产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
		  let loadLayerIdx = layer.load();
		  $.ajax({
			  url:'upd-plan',
			  method:'put',
			  contentType:'application/json',
			  data:JSON.stringify(Ids),
			  dataType:'json'
		  }).done(function(result){
			  layer.close(loadLayerIdx);
			  if(result.success){
					reloadData();
					layer.msg(result.message,{
							  icon: 1,
							  time: 1000
							}); 
					layer.close(layerIdx);
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
		  }).fail(function(xhr){
			  layer.close(loadLayerIdx);
			  layer.msg('服务器错误！', {icon: 6});
		  });
		  layer.close(index);
	  });
  });
  
//执行取消下达操作
  $('#removeOkPlan').click(function(){
	  var Ids = $("#grid").jqGrid('getGridParam','selarrrow');
	  if(!Ids || Ids.length==0){
		   layer.msg('您没有选择任何数据！', {icon: 2}); 
		   return;
	   }
	  layer.confirm('你确实要取消下达这些产品计划信息吗？', {icon: 3, title:'警告'}, function(index){
		  let loadLayerIdx = layer.load();
		  $.ajax({
			  url:'upd-plan-r',
			  method:'put',
			  contentType:'application/json',
			  data:JSON.stringify(Ids),
			  dataType:'json'
		  }).done(function(result){
			  layer.close(loadLayerIdx);
			  if(result.success){
					reloadData();
					layer.msg(result.message,{
							  icon: 1,
							  time: 1000
							}); 
					layer.close(layerIdx);
				}else{
					layer.msg(result.message, {icon: 6}); 
				}
		  }).fail(function(xhr){
			  layer.close(loadLayerIdx);
			  layer.msg('服务器错误！', {icon: 6});
		  });
		  layer.close(index);
	  });
  })
  
  
 //执行设置按钮的使用
 setBnStatus();
</script>

</body>
</html>